<template>
  <j-modal :visible="visible" :confirmLoading="loading" :after-close="afterClose" v-bind="modalProps" @ok="onOk" @cancel="onCancel">
    <a-spin :spinning="loading">
      <div v-html="content"></div>
      <a-form-model ref="form" :model="model" :rules="rules">
        <a-form-model-item prop="input">
          <a-input ref="input" v-model="model.input" v-bind="inputProps" @pressEnter="onInputPressEnter"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
  import pick from 'lodash.pick'

  export default {
    name: 'JPrompt',
    data() {
      return {
        visible: false,
        loading: false,
        content: '',
        // 弹窗参数
        modalProps: {
          title: ''
        },
        inputProps: {
          placeholder: ''
        },
        // form model
        model: {
          input: ''
        },
        // 校验
        rule: [],
        // 回调函数
        callback: {}
      }
    },
    computed: {
      rules() {
        return {
          input: this.rule
        }
      }
    },
    methods: {
      show(options) {
        this.content = options.content
        if (Array.isArray(options.rule)) {
          this.rule = options.rule
        }
        if (options.defaultValue != null) {
          this.model.input = options.defaultValue
        }
        // 取出常用的弹窗参数
        let pickModalProps = pick(options, 'title', 'centered', 'cancelText', 'closable', 'mask', 'maskClosable', 'okText', 'okType', 'okButtonProps', 'cancelButtonProps', 'width', 'wrapClassName', 'zIndex', 'dialogStyle', 'dialogClass')
        this.modalProps = Object.assign({}, pickModalProps, options.modalProps)
        // 取出常用的input参数
        let pickInputProps = pick(options, 'placeholder', 'allowClear')
        this.inputProps = Object.assign({}, pickInputProps, options.inputProps)
        // 回调函数
        this.callback = pick(options, 'onOk', 'onOkAsync', 'onCancel')
        this.visible = true
        this.$nextTick(() => this.$refs.input.focus())
      },

      onOk() {
        this.$refs.form.validate((ok, err) => {
          if (ok) {
            let event = { value: this.model.input, target: this }
            // 异步方法优先级高于同步方法
            if (typeof this.callback.onOkAsync === 'function') {
              this.callback.onOkAsync(event)
            } else if (typeof this.callback.onOk === 'function') {
              this.callback.onOk(event)
              this.close()
            } else {
              this.close()
            }
          }
        })
      },
      onCancel() {
        if (typeof this.callback.onCancel === 'function') {
          this.callback.onCancel(this.model.input)
        }
        this.close()
      },

      onInputPressEnter() {
        this.onOk()
      },

      close() {
        this.visible = this.loading ? this.visible : false
      },

      forceClose() {
        this.visible = false
      },

      showLoading() {
        this.loading = true
      },
      hideLoading() {
        this.loading = false
      },

      afterClose(e) {
        if (typeof this.modalProps.afterClose === 'function') {
          this.modalProps.afterClose(e)
        }
        this.$emit('after-close', e)
      }

    }
  }
</script>

<style scoped>

</style>
